<template>
  <div class="manage">
    <!-- 我是用户反馈目录 -->
    <a-card>
      <a-form>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="公司名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <strong class="bm">{{this.accountMessage.companyName}}</strong>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="登陆账号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <strong class="bm">{{this.accountMessage.loginAccout}}</strong>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="账户密码" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <strong class="bm">********</strong>
            </a-form-item>
          </a-col>
          <a-col :span="3" :style="{ float:'right' }">
            <span class="deepblue" @click="update">修改</span>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="提现账号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <strong class="bm">{{this.accountMessage.withdrowAccount}}</strong>
            </a-form-item>
          </a-col>
          <a-col :span="3" :style="{ float:'right' }">
            <span class="deepblue" @click="add()">添加</span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-modal title="修改密码" :visible="visible" @ok="detailsOk" @cancel="detailsCancel" :width="500">
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="旧密码" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-input
                placeholder="请输入旧密码"
                 type="password"
                v-decorator="[
                                    'oldpwd',
                                {rules: [{ required: true, message: '旧密码不能为空!' }]}
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="新密码" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-input
                placeholder="请输入新密码"
                 type="password"
                  v-decorator="['newPassword',
                                {rules: [{ required: true, message: '请输入新密码!' },{ validator: validateToNextPassword}]}
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="确认新密码" :label-col="{ span:5}" :wrapper-col="{ span: 16,offset:1 }">
              <a-input
                 @blur="handleConfirmBlur"
                placeholder="请重复新密码"
                 type="password"
                v-decorator="['confirm',
                                {rules: [{ required: true, message: '请重复新密码!' },{ validator: compareToFirstPassword}]}
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <a-modal title="添加账户" :visible="addvisible" @ok="Ok" @cancel="Cancel" :width="600">
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="开户人" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-input
                placeholder="请输入开户人姓名"
                v-decorator="['name', {rules: [{ required: true, message: '开户人姓名不能为空' }]}]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="银行卡号" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-input
                placeholder="请输入银行卡号"
                v-decorator="['cardNo',
                                {rules: [{ required: true, message: '请输入银行卡号！' }]}
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

      

        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="开户行" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-select style="width:100%" v-decorator="['bank',  {rules: [{ required: true, message: '请选择开户号！' }]}]" placeholder="全部">
                
                <a-select-option
                  v-for="item in openbank"
                  :key="item.id"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="30">
            <a-form-item label="登陆密码" :label-col="{ span: 3 }" :wrapper-col="{ span: 16,offset:3 }">
              <a-input
                placeholder="请输入登陆密码"
                type="password"
                v-decorator="[
                                    'loginPwd',
                                {rules: [{ required: true, message: '请输入登陆密码！' }]}
                                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      addvisible: false,
      accountMessage: [],
      companyName: "",
      managerId: "",
      openbank:'',
      confirmDirty:false,
    };
  },
  methods: {
     handleConfirmBlur  (e) {
      const value = e.target.value;
       this.confirmDirty = this.confirmDirty || !!value;
     },
    compareToFirstPassword  (rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('newPassword')) {
        callback('俩次输入密码不一致!');
      } else {
        callback();
      }
    },
       validateToNextPassword  (rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    update() {
      this.visible = true;
    },
    detailsOk(e) {
      this.visible = false;
      this.changePw();
    },
    detailsCancel(e) {
      this.visible = false;
    },
    Ok(e) {
      this.addvisible = false;
      this.addAcount();
    },
    Cancel(e) {
      this.addvisible = false;
    },
    add() {
      this.addvisible = true;
      
    },
    //初始化账户
    linit(){
       this.axios
        .post(this.baseUrl + "/account/listInit", {
          loginToken: this.$store.state.loginToken
          
        })
        .then(response => {
          console.log(response); 
          this.openbank=response.data.data.bankInfo
          console.log(this.openbank);
          // this.openbank=response.data.data.
         
        });
    },

    account() {
      this.axios
        .post(this.baseUrl + "/account/getAgentAccount", {
          loginToken: this.$store.state.loginToken
          //  loginAgentId:61,
        })
        .then(response => {
          console.log(response);
          this.companyName = response.data.data.companyName;

          this.accountMessage = response.data.data;
          //  console.log(this.datalist);
          this.password = response.data.data.password;
          this.managerId = response.data.data.managerId;
          // this.pw=md5(this.password);
          // console.log(this.pw);
        });
    },
    //添加账户
    addAcount() {
       var values = this.form.getFieldsValue();
       console.log(values);
      this.axios
        .post(this.baseUrl + "/account/save", {
          loginToken: this.$store.state.loginToken,
          accountNumber:values.cardNo,
          loginPassword:values.loginPwd,
          managerId:this.managerId,
          name:values.name,
          bankId:values.bank,
        })
        .then(response => {
          console.log(response);
          if(response.data.code==0){
            this.$message.info("添加成功");
            this.form.resetFields();
            this.account();
          }
        });
    },
    changePw() {
      var values = this.form.getFieldsValue();
      console.log(values);
      this.axios
        .post(this.baseUrl + "/account/updatePwd", {
          loginToken: this.$store.state.loginToken,
          managerId: this.managerId,
          oldPwd: values.oldpwd,
          newPwd: values.newPassword,
        })
        .then(response => {
          console.log(response);
          if(response.data.code==0){
            this.$message.info("修改成功");
            this.form.resetFields();
          }
          //  this.accountMessage=response.data.data;
          //  console.log(this.datalist);
        });
    }
  },
  created() {
    this.account();
    this.linit();
  }
};
</script>

<style scoped>
.manage {
  width: 100%;
}
.bm {
  display: inline-block;
  width: 420%;
  height: 40px;
  border-bottom: 1px solid gainsboro;
}
.deepblue {
  color: #1890ff;
  font-size: 20px;
  line-height: 22px;
}
</style>
